<template>
  <div></div>
  <el-dialog v-model="props.isshow" :title="form.id ? '编辑管理员' : '添加管理员'" @close="reset">
    <el-form :rules="rules" :model="form" ref="ruleFormRef">
      <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="rolename">
        <el-input v-model="form.rolename" clearable autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限" :label-width="formLabelWidth">
        <el-tree ref="treeRef" :data="store.state.menu.menuList" show-checkbox default-expand-all node-key="id"
          highlight-current :props="defaultProps" :check-strictly="true" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import mit from '../../common/myMitt';
import { useStore } from "vuex";
import { reactive, ref, nextTick } from "vue";
import { roleaddedit, roleinfo } from '../../request/api';
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules, ElTree } from "element-plus";

let store = useStore();
const ruleFormRef: any = ref<FormInstance>();
let formLabelWidth = "140px";
let props = defineProps(["isshow"]);
let emit = defineEmits(["cancelDialog", "showDialog"]);
const treeRef: any = ref<InstanceType<typeof ElTree>>();
const rules = reactive<FormRules>({
  rolename: [
    { required: true, message: "请输入角色名称", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});
const defaultProps = {
  children: 'children',
  label: 'title',
}
let form: any = ref({
  rolename: '',
  menus: '',
  status: 2,
});

store.dispatch('menu/getMenuList');

function reset() {
  emit('cancelDialog');
  ruleFormRef.value.resetFields();
  treeRef.value.setCheckedKeys([]);
  form.value = {
    rolename: '',
    menus: '',
    status: 2,
  };
}

function submit() {
  ruleFormRef.value.validate((val: any) => {
    if (!val) {
      return;
    }
    form.value.menus = treeRef.value.getCheckedKeys() ? treeRef.value.getCheckedKeys().join() : "";
    let url = form.value.id ? '/roleedit' : '/roleadd';
    roleaddedit(url, form.value).then((res: any) => {
      if (res.code == 200) {
        store.dispatch('role/getRoleList');
        ElMessage.success(res.msg);
        reset();
        return;
      }
      ElMessage.warning(res.msg);
    })
  })
}

mit.on('getInfo', (id: any) => {
  emit('showDialog');
  roleinfo({ id }).then((res: any) => {
    if (res.code == 200) {
      form.value = { ...res.list, id };
      nextTick(() => {
        treeRef.value.setCheckedKeys(form.value.menus ? form.value.menus.split(',') : []);
      })
    }
  })
})

</script>

<style lang="scss" scoped></style>